<template>
	<view>
		<view class="friend-recommend">
			<u-cell-group>
				<u-cell>
					<view slot="title" class="u-slot-title flex-between">
						<u-avatar src="" shape="square" size="50"></u-avatar>
						<view class="name flex-between">
							<view class="">
								<u--text class="siteutext" text="郭拉拉" color="#2C2C2C" size="28rpx"></u--text>
								<text class="introduce ellipsis-line">联想集团 高级研发经理</text>
								<text class="introduce ellipsis-line">IT · 互联网</text>
							</view>
							<u-button class="flex-align" type="primary" text="一天前活跃"></u-button>
						</view>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="pass-ratio">
			<u--text text="添加验证信息（通过率更高）" color="#3D3D3D" size="28rpx"></u--text>
			<u--textarea class="textarea" v-model="value1" placeholder="请输入内容"></u--textarea>
			<u-button class="send-application" type="primary" text="发送申请"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '哈喽，我是xxx，很高兴认识你。',
			};
		}
	}
</script>

<style lang="less">
	.friend-recommend {
		margin-top: 22rpx;
		background-color: #ffffff;

		::v-deep .u-line {
			border: none !important;
		}

		::v-deep .u-icon__icon {
			span {
				font-size: 28rpx !important;
			}
		}

		::v-deep .u-slot-title {
			column-gap: 20rpx;

			.name {
				flex: 1;

				.u-button {
					width: 122rpx;
					background-color: #ffffff;
					border: none;
					padding: 0;
					margin: 0;
					flex-shrink: 0;

					&::after,
					&::before {
						content: none;
					}

					span {
						color: #1872FF !important;
						font-size: 20rpx !important;
					}
				}

				::v-deep .siteutext span {
					font-size: 28rpx;
					color: #3D3D3D !important;
				}

				.introduce {
					font-size: 24rpx;
					color: #8A8A8A;
					margin-top: 12rpx;
				}
			}
		}
	}

	.pass-ratio {
		padding: 42rpx 36rpx 90rpx 36rpx;
		background-color: #ffffff;

		::v-deep .textarea {
			background-color: #EFEFEF;
			margin: 20rpx 0rpx 88rpx 0rpx;

			.uni-textarea-textarea {
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}

		::v-deep .send-application {
			width: 489rpx;
			height: 92rpx;
			background: #429CFD;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			span {
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
	}
</style>